<template>
    <div class="SlideVideoContainer" ref="container">
        <div
            class="videoSlideWrapper"
            :style="{ transform: `translateX(${totalOffset}px)`, transition: isTransitioning ? 'transform 0.5s ease' : 'none' }"
            @mousedown="startDrag"
            @mousemove="onDrag"
            @mouseup="endDrag"
            @mouseleave="endDrag"
            @touchstart="startDrag"
            @touchmove="onDrag"
            @touchend="endDrag"
        >
            <div v-for="(video, index) in videos" :key="video.id" class="videoSlide">
                <img :src="video.poster" alt="" class="backgroundPoster" draggable="false"/>
                <div class="overlayText">
                    <h2>{{ video.title }}</h2>
                    <p>{{ video.label }}</p>
                </div>
                <img
                    class="centerPlayBtn"
                    src="/src/assets/img/common/playvideo.webp"
                    alt="play"
                    @click.stop="openVideo(video)"
                />
            </div>
        </div>

        <img v-show="!isFirstPage" class="prePageBtn" src="/src/assets/img/common/carouselArrow.webp" @click="prePage"/>
        <img
            v-show="!isLastPage"
            class="nextPageBtn"
            src="/src/assets/img/common/carouselArrow.webp"
            @click="nextPage"
        />

        <div class="customDotGroup">
            <span
                v-for="(_, dotIndex) in videos.length"
                :key="dotIndex"
                class="customDot"
                :class="{ active: dotIndex === currentPage }"
                @click="goToPage(dotIndex)"
            >
                <span class="bar"></span>
            </span>
        </div>

        <div v-if="showVideo" class="overlay" @click="closeVideo">
            <div class="video-popup" @click.stop>
                <video :src="currentVideoSrc" ref="videoPlayer" preload controls autoplay/>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, computed} from 'vue'

const videos = ref([
    {
        id: '001',
        title: 'Bringing Millions of Players Together',
        label: 'Supercell',
        poster: '/src/assets/img/careers/index/poster/poster01.webp',
        src: '/src/assets/video/careers/index/video01.mp4'
    },
    {
        id: '002',
        title: 'The Making of a Hero',
        label: 'Clash of Clans',
        poster: '/src/assets/img/careers/index/poster/poster02.webp',
        src: '/src/assets/video/careers/index/video02.mp4'
    },
    {
        id: '003',
        title: 'The Making of Goblin Cage',
        label: 'Clash Royale',
        poster: '/src/assets/img/careers/index/poster/poster03.webp',
        src: '/src/assets/video/careers/index/video03.mp4'
    },
    {
        id: '004',
        title: 'The Making of Giant Goblin',
        label: 'Clash Royale',
        poster: '/src/assets/img/careers/index/poster/poster04.webp',
        src: '/src/assets/video/careers/index/video04.mp4'
    }
])

const currentPage = ref(0)
const container = ref(null)
const dragStartX = ref(0)
const dragDelta = ref(0)
const totalOffset = ref(0)
const isDragging = ref(false)
const isTransitioning = ref(false)
const showVideo = ref(false)
const currentVideoSrc = ref('')
const videoPlayer = ref(null)

const pageWidth = () => container.value?.clientWidth || 0
const isFirstPage = computed(() => currentPage.value === 0)
const isLastPage = computed(() => currentPage.value === videos.value.length - 1)

const dragThreshold = 10
const playBtnClass = '.centerPlayBtn'

const startDrag = (e) => {
    const target = e.target
    if (target.closest(playBtnClass)) return // 如果点击的是播放按钮，则不触发拖拽

    isDragging.value = true
    dragStartX.value = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX
    dragDelta.value = 0
}

const onDrag = (e) => {
    if (!isDragging.value) return
    const currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX
    const delta = currentX - dragStartX.value
    dragDelta.value = delta
    totalOffset.value = -currentPage.value * pageWidth() + delta
}

const endDrag = (e) => {
    if (!isDragging.value) return
    isDragging.value = false

    const endX = e.type.includes('mouse') ? e.clientX : e.changedTouches[0].clientX
    const delta = endX - dragStartX.value

    if (Math.abs(delta) < dragThreshold) {
        totalOffset.value = -currentPage.value * pageWidth()
        // 重置 dragDelta
        dragDelta.value = 0
        return
    }

    if (delta > 100 && currentPage.value > 0) {
        currentPage.value--
    } else if (delta < -100 && currentPage.value < videos.value.length - 1) {
        currentPage.value++
    }

    isTransitioning.value = true
    totalOffset.value = -currentPage.value * pageWidth()
    // 重置 dragDelta
    dragDelta.value = 0
    setTimeout(() => (isTransitioning.value = false), 500)
}

const prePage = () => {
    if (isFirstPage.value) {
        bounce()
        return
    }
    currentPage.value--
    slideToCurrent()
}

const nextPage = () => {
    if (isLastPage.value) {
        bounce()
        return
    }
    currentPage.value++
    slideToCurrent()
}

const goToPage = (index) => {
    currentPage.value = index
    slideToCurrent()
}

const slideToCurrent = () => {
    isTransitioning.value = true
    totalOffset.value = -currentPage.value * pageWidth()
    setTimeout(() => (isTransitioning.value = false), 500)
}

const bounce = () => {
    isTransitioning.value = true
    totalOffset.value += isFirstPage.value ? 50 : -50
    setTimeout(() => {
        totalOffset.value = -currentPage.value * pageWidth()
        setTimeout(() => (isTransitioning.value = false), 300)
    }, 200)
}

const openVideo = (video) => {
    currentVideoSrc.value = video.src
    showVideo.value = true
    document.body.style.overflow = 'hidden';
    setTimeout(() => videoPlayer.value?.play(), 100);
}

const closeVideo = () => {
    showVideo.value = false
    currentVideoSrc.value = ''
    document.body.style.overflow = 'auto'
    videoPlayer.value.currentTime = 0
}
</script>

<style scoped>
.SlideVideoContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.videoSlideWrapper {
    display: flex;
    height: 100%;
}

.videoSlide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
    cursor: default;
}

.backgroundPoster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlayText {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 80px;
    color: #fff;
    text-align: center;
}

.overlayText h2 {
    font-size: 32px;
    font-weight: bold;
}

.overlayText p {
    color: #fff;
    font-size: 19px;
    margin-top: 8px;
    text-transform: uppercase;
}

.centerPlayBtn {
    position: absolute;
    width: 8%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
    -webkit-user-drag: none;
}

.centerPlayBtn:hover {
    transform: translate(-50%, -50%) scale(1.2);
}

.prePageBtn,
.nextPageBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4%;
    cursor: pointer;
    z-index: 5;
    filter: invert(1);
    user-select: none;
    -webkit-user-drag: none;
}

.prePageBtn {
    left: 0;
}

.nextPageBtn {
    right: 0;
    transform: translateY(-50%) rotateY(180deg);
}

.customDotGroup {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.customDot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
}

.customDot.active {
    background-color: #2d85f3;
    width: 24px;
    border-radius: 7px;
    transition: width 0.3s ease-in-out;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-popup {
    z-index: 1001;
    width: 80%;
}

.video-popup video {
    border-radius: 20px;
    width: 100%;
}
</style>